<template>
  <el-dialog
    :title="mock === 'add' ? '新增部门' : '编辑部门'"
    :visible.sync="isShow"
    width="600px"
    @close="closeEvent"
  >
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model.trim="form.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model.trim="form.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" @focus="getUserList">
          <el-option
            v-for="item in managerList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div style="text-align: center">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {
  sysUserSimple,
  companyDepartmentPost,
  companyDepartmentPut
} from '@/api/departments.js'
export default {
  props: {
    rawData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      mock: '',
      form: {
        name: '', // string	非必须		部门名称
        code: '', // string	非必须		部门编码，同级部门不可重复
        manager: '', // string	非必须		负责人名称
        introduce: '', // string	非必须		介绍
        pid: ''
      }, // string	非必须		父级部门ID
      rules: {
        name: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              // rule： 规则 value： 值 callback：验证通过执行callback() 验证失败执行 callback(new Error('错误信息'))
              // 第一步 拿到点击项的子集部门 子集部门的pid就是 点击部门的id 拿到点击项的id 就行
              // 第二步 组织架构的原始列表数据
              // 第三步 拿到当前点击项的子集部门
              if (this.mock === 'add') {
                const resArr = this.rawData.filter(
                  (item) => item.pid === this.form.pid
                ) // 过滤出来每一项的pid 等于当前点击项的pid 就代表是他的子集

                // console.log('原始数据', this.rawData)
                // 判断是否同名
                // const bol = resArr.some((item) => {
                //   item.name === value
                // })
                const bol = resArr.some((item) => item.name === value)
                bol ? callback(new Error('已有该部门')) : callback()
              } else if (this.mock === 'edit') {
                const resArr = this.rawData.filter(
                  (item) => item.pid === this.form.pid
                )
                const bol = resArr.some(
                  (item) => item.name === value && item.id !== this.form.id
                )
                bol ? callback(new Error('已有该部门')) : callback()
              }

              // 第一步 判断是新增还是编辑 编辑可以用自己的名字
            }
          }
        ],
        code: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          },
          {
            validator: (rule, value, callback) => {
              if (this.mock === 'add') {
                const bol = this.rawData.some((item) => item.code === value)
                bol ? callback(new Error('已有该部门编码')) : callback()
              } else if (this.mock === 'edit') {
                const bol = this.rawData.some(
                  (item) => item.code === value && item.id !== this.form.id
                )
                bol ? callback(new Error('已有该部门编码')) : callback()
              }
            }
          }
        ],
        manager: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ],
        introduce: [
          {
            required: true,
            message: '必填',
            trigger: 'change'
          }
        ]
      },
      isShow: false,
      managerList: [] // 下拉菜单数据列表
    }
  },
  mounted() {
    // 兄弟组件传值 监听
    this.$bus.$on('itemShow', (bol, value, mock) => {
      this.isShow = bol
      this.form.pid = value.id // 当前点击项的id就是 form表单中的pid
      this.mock = mock
      if (mock === 'edit') {
        this.form = JSON.parse(JSON.stringify(value)) // 数据回显
      }
    })
  },
  // 兄弟组件传值 销毁
  beforeDestroy() {
    this.$bus.$off('itemShow')
  },
  methods: {
    async getUserList() {
      if (this.managerList.length === 0) {
        const res = await sysUserSimple()
        // console.log(res)
        this.managerList = res.data
      }
    },
    submit() {
      this.$refs.form.validate(async(result) => {
        /* 新增部门
          1.定义api 获取接口数据
          2.点击确定 清空表单数据和表单验证 同时关闭表单
          3.提示成功
          3.刷新数据
        */
        if (result) {
          // 判断是新增还是修改
          if (this.mock === 'add') {
            await companyDepartmentPost(this.form)
            this.$message.success('新增部门成功')
          } else if (this.mock === 'edit') {
            await companyDepartmentPut(this.form)
            this.$message.success('编辑部门成功')
          }
          this.isShow = false
          this.$emit('getData')
        }
      })
    },
    // 关闭表单 清空表单数据
    closeEvent() {
      this.$refs.form.resetFields() // bug 第一次打开新增部门时 没有bug 初始值为kong 第一次打开编辑部门时 有bug 初始值是  this.form = JSON.parse(JSON.stringify(value))
      // 清空表单数据
      this.form = {
        name: '', // string	非必须		部门名称
        code: '', // string	非必须		部门编码，同级部门不可重复
        manager: '', // string	非必须		负责人名称
        introduce: '', // string	非必须		介绍
        pid: ''
      }
    }
  }
}
</script>

<style></style>
